<iframe src="http://127.0.0.1:5500/src/app/other/iframe-use/iframe.html" frameborder="0" class="iframe"></iframe>

<nz-select [(ngModel)]="time" (ngModelChange)="clickFunction($event)" class="select">
    <nz-option nzValue="1" nzLabel="一天"></nz-option>
    <nz-option nzValue="7" nzLabel="一周"></nz-option>
    <nz-option nzValue="30" nzLabel="一个月"></nz-option>
    <nz-option nzValue="90" nzLabel="三个月"></nz-option>
</nz-select>

<div class="explain">
    <h2>效果说明</h2>
    <p>
        边框内为iframe页面，下拉框选择时间后，会将选择的值传递给iframe页面，
        iframe页面根据传递的值，将页面中的内容显示出来。
    </p>

    <h2>主要实现</h2>
    <p>
        1. 使用iframe标签引入外部页面，设置frameborder为0，表示不显示边框。
        <br>
        2. 使用window.onload事件监听iframe页面的加载，当iframe页面加载完成时，向父页面发送消息。
        <br>
        3. 在父页面中，使用window.addEventListener方法监听来自iframe页面的消息，使用event.origin属性验证消息来源。
        获得子页面加载成功的消息后，使用postMessage方法向子页面发送消息控制函数执行，这里首次加载和切换select都会触发子页面iframe函数的执行。
        <br>
        4. 在iframe页面中，使用window.addEventListener方法监听来自父页面的消息。获得父页面传递过来的消息后，根据消息类型，执行changeTime函数。
    </p>
</div>
